import React, { PureComponent } from 'react'
import { Text, View, StyleSheet } from 'react-native'
import DefaultImage from 'src/components/image/DefaultImage'
import CustomTextEllipsize from 'src/components/custom-text-ellipsize'
import PropTypes from 'prop-types'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import { formatTime, todayYestodayTime } from 'src/utils/TimeUtil'

export default class MessageItem extends PureComponent {
  static propTypes = {
    item: PropTypes.object,
    errorSource: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
    needFormatTime: PropTypes.bool,
    messageType: PropTypes.string
  }

  static defaultProps = {
    needFormatTime: false
  }

  render () {
    const { item, errorSource, messageType } = this.props
    return (
      <View style={styles.chatItem}>
        <DefaultImage
          style={styles.headerImg}
          source={messageType === 'notify' ? item.avatarUrl : { uri: item.avatarUrl }}
          errorSource={errorSource}
        />
        <View style={styles.itemMiddle}>
          <View style={styles.itemMiddleText}>
            <CustomTextEllipsize
              style={styles.itemName}
              text={item.nick}
            />
            <CustomTextEllipsize
              style={styles.itemCompany}
              text={item.sign}
            />
            <Text style={styles.itemMsgTime}>{this._getTime(item.msgTime)}</Text>
          </View>
          <View style={styles.itemBottom}>
            {messageType === 'notify'
              ? (<Text style={styles.itemMsg}>{item.lastMsg}</Text>)
              : (<CustomTextEllipsize style={styles.itemMsg} text={item.lastMsg}/>)}
            {messageType !== 'notify' && !!item.unread && (
              <View style={styles.unread}>
                <Text style={styles.unreadCount}>{item.unread > 99 ? '99+' : item.unread}</Text>
              </View>
            )}
          </View>
        </View>
      </View>
    )
  }

  _getTime = (time) => {
    const { needFormatTime } = this.props
    if (needFormatTime) {
      return todayYestodayTime(new Date(formatTime(time)).getTime(), true)
    }
    return time
  }
}

const styles = StyleSheet.create({
  chatItem: {
    alignItems: 'center',
    flexDirection: 'row',
    width: ScaleS(375),
    paddingHorizontal: ScaleS(20),
    backgroundColor: '#ffffff',
    marginVertical: ScaleS(20)
  },
  rightBtn: {
    position: 'absolute',
    top: ScaleS(20),
    right: 0,
    height: ScaleS(52),
    width: ScaleS(75),
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'red',
    color: 'white'
  },
  headerImg: {
    width: ScaleS(52),
    height: ScaleS(52),
    borderRadius: ScaleS(26),
    marginRight: ScaleS(14),
    // backgroundColor: '#cccccc',
    resizeMode: 'cover'
  },
  itemMiddle: {
    // height: ScaleS(52),
    justifyContent: 'space-between',
    flex: 1
  },
  itemMiddleText: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center'
  },
  itemName: {
    fontSize: ScaleT(18),
    fontWeight: '600',
    color: '#000',
    marginRight: ScaleS(15)
  },
  itemCompany: {
    flex: 1,
    fontSize: ScaleT(14),
    color: '#999999'
  },
  itemMsgTime: {
    fontSize: ScaleT(14),
    color: '#D1D1D1'
  },
  itemBottom: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'flex-end',
    marginTop: ScaleS(15)
  },
  itemMsg: {
    flex: 1,
    // width: ScaleS(240),
    fontSize: ScaleT(14),
    color: '#999999',
    paddingRight: ScaleS(10)
  },
  unread: {
    width: ScaleS(25),
    height: ScaleS(15),
    backgroundColor: '#FF6B6B',
    borderRadius: ScaleS(8),
    alignItems: 'center',
    justifyContent: 'center'
  },
  unreadCount: {
    fontSize: ScaleT(10),
    fontWeight: '500',
    color: '#FFFFFF'
  }
})
